<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/base.css" />
		<style>
			#tab{
				width: 100%;
				background-color: #bbb;
				position: fixed !important;
				top: 44px !important;
				z-index: 10;
			}
			.mui-slider {
				margin-top: .88rem;
			}
			.mui-scroll-wrapper {
				position: static;
				margin-top: 80px;
			}
			
			/* 选项卡 */
			ul,li{
				list-style: none;
				padding: 0;
				margin:0;
			}
			.tabMenu{
				width: 100%;
				height: 35px;
				
			}
			.tabMenu .tabItem{
				line-height: 35px;
				font-size: 14px;
				float: left;
				width: 20%;
				text-align: center;
				position: relative;
			}
			.tabMenu .tabItem::after{
				content: '';
				display: block;
				position: absolute;
				width: 100%;
				height: 2px;
				bottom: 0;
				left: 0;
				background-color: #ff6464;
				display: none;
				}
			.tabMenu .tabItem.active::after{
				display: block;
			}
		</style>
	</head>

	<body>
		<!-- 头部标题 -->
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">榜单</h1>
		</header>

		<div id="app">
			<!-- 选项卡按钮 -->
			<div id="tab">
				<ul class="tabMenu">
					<li class="tabItem active"  @tap=changeMovie(1,$event)>
							1 - 50
					</li>
					<li class="tabItem"  @tap=changeMovie(2,$event)>
							51 - 100
					</li>
					<li class="tabItem"  @tap=changeMovie(3,$event)>
							101 - 150
					</li>
					<li class="tabItem"  @tap=changeMovie(4,$event)>
							151 - 200
					</li>
					<li class="tabItem"  @tap=changeMovie(5,$event)>
							201 - 250
					</li>
				</ul>
			</div>
			<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
				<div class="mui-scroll">
					<!--数据列表-->
					<ul class="mui-table-view mui-table-view-chevron">
						<li class="mui-table-view-cell mui-media" v-for="(val,index) in movies" :key="index"  @tap="topDetail(val.id)">
							<a class="mui-navigate-right">
								<img class="mui-media-object mui-pull-left" :src="val.images.large">
								<div class="mui-media-body">
									{{val.title}}
									<p class='mui-ellipsis'>剧情/战争 <span>{{val.rating.average}}分</span></p>
									<p class='mui-ellipsis'>导演：{{val.directors2}}</p>
									<p class='mui-ellipsis'>主演：{{val.casts2}}</p>
								</div>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<script src="../js/jquery-3.3.1.min.js"></script>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript">
			mui.init();
			let moviesDeatil;
			//实例化vue对象
			let APP = new Vue({
				el: '#app',
				data: {
					// 电影列表
					movies: [],
					pn: 1,
					curPage:1,
					curIndex:1,
				},
				
				methods:{
					
					changeMovie(pn,e){
						// getMovies(pn);//带参数调用查询电影的方法
						// let curTarget = document.getElementsByTagName('li');
						// console.log(JSON.stringify(curTarget))
						
						// console.log(e.target);	// 目标对象（也就是点击的li对象）
						
						// console.log(mui('.topcate li'))
						// 所有的li标签，都只加 mui-table-view-cell 这个类名
						for(let i=0; i<mui('.tabMenu li').length; i++){
							mui('.tabMenu li')[i].className = 'tabItem';
						}
						// 给点击的li对象，添加active 这个类名
						e.target.className = 'tabItem active';
						APP.pn = pn;
						// 再重新调用数据
						getMovies(pn);
						
					},
					
					topDetail(id){
							// mui.fire(目标窗口的webview,'自定义事件名',{参数列表})
							mui.fire(moviesDeatil, 'getMovie', {
								mid: id
							})
							// mui 提供打开窗口的方法
							mui.openWindow({ // 打开窗口之前
								// url: '../pages/moviesDeatil.html'
								id: 'mDeatil'
							});
						}
						
				},
				
				
			});
			
			let getMovies;
			mui.plusReady(function () {
				
			    //请求电影数据的方法
			    getMovies = function (pn){
			    	APP.movies = [];
			    	console.log("执行上拉刷新\n");
			    	console.log("getMovies="+pn);
			    	// 更换页码
			    	if(pn){
			    		APP.pn = pn;
			    	}else{
			    		APP.pn=1;
			    	}
			    	
			    	mui.getJSON(
			    		'http://t.yushu.im/v2/movie/top250', {
			    			start: (APP.pn - 1) * 50, // 起始记录的下标，第1页第1条记录是 0
			    			count: 50, // 每页显示的条数
			    			apikey: '0df993c66c0c636e29ecbb5344252a4a'
			    		},
			    		function(data) { //json对象
			    			//服务器返回响应，根据响应结果，分析是否登录成功；
			    			// console.log("获取即将上映数据：\n", JSON.stringify(data))
			    			// 总数据数量
			    			let total = data.total; //获取到的电影总数
			    	
			    			let subjects = data.subjects; //接受返回的包含所有电影的对象（数组）
			    			if (subjects.length > 0) {
			    	
			    				// 对数据subjects进行相关内容的转换，如：剧情、导演、主演
			    				let directors; //导演
			    				let casts; //主演
			    				subjects.map(function(v) {
			    	
			    					// 剧情
			    					v.genres = v.genres.join('/');
			    	
			    					// 导演名称
			    					directors = v.directors;
			    					let arr = [];
			    					directors.forEach(function(vv) {
			    						// 数组追加
			    						arr.push(vv.name); //  ["管虎","xxx"]
			    					});
			    					// 增加多一个导演下标
			    					v.directors2 = arr.join('/');
			    					// 演员名称
			    					casts = v.casts;
			    					let arr2 = [];
			    					casts.forEach(function(vvv) {
			    						arr2.push(vvv.name);
			    					})
			    					// 增加多一个演员下标
			    					v.casts2 = arr2.join('/');
			    					return v;
			    				})
			    				// console.log(JSON.stringify(subjects));
			    				// 赋值
			    				// APP.movies = APP.movies.concat(subjects);
			    				// console.log(JSON.stringify(APP.movies))
			    				APP.movies = subjects;
			    				// 允许上拉加载
			    				// mui('#pullrefresh').pullRefresh().endPullupToRefresh(APP.movies.length >= total ? true : false);
			    			}
			    		},
			    		function(xhr, type, errorThrown) {
			    				//异常处理；
			    				console.log(type);
			    			});
			    };
				
				//开始就调用方法获取电影数据
				getMovies(1);
			    
				moviesDeatil = plus.webview.getWebviewById('mDeatil'); // 详细页的窗口对象
				if (!moviesDeatil) {
					console.log(1);
					// 预加载页面
					moviesDeatil = mui.preload({ // 【预加载】自动创建了窗口，加载了文件
						url: '../pages/moviesDeatil.html',
						id: 'mDeatil' // 这个也是webview的id
					})
				}
				
			})
			
			//上拉刷新
			function pullupRefresh(){
				console.log("执行上拉刷新\n");
				// 调用获取电影的方法
				getMovies();
			};
			
			//下拉刷新
			function pulldownRefresh(){
				
			};
			
			
			
		</script>

	</body>

</html>
